<template>
  <div>
    <!-- <div class="order-container" v-for="(item, index) in orderData" :key="index"> -->
    <div class="order-head">
      <span class="order-desc-left enterprise">{{ orderDataItem.hotel }}</span>
      <span class="order-desc-right">订单状态：<span>{{ orderDataItem.type }}</span></span>
      <!-- <span class="order-desc-right">下单时间：<span>{{ orderDataItem.time }}</span></span> -->
    </div>
    <div class="order-info">
      <div class="order-img">
        <img src="@/assets/logo.png" />
      </div>
      <div class="detail-right order-desc">
        <div class="desc-item" v-for="(item,index) in orderDataItem.orderDetail" :key="index">
          <div class="order-name">{{ item.name }}</div>
          <div class="order-price-number">
            <div class="price">￥<span>{{ item.price }}</span>元</div>
            <div class="number">x<span>{{ item.number }}</span></div>
          </div>
        </div>
      </div>

    </div>
    <div class="order-count-total">
      <span class="count">共<span>{{ orderDataItem.orderDetail.length }}</span>件商品，</span>
      <span>总计:￥<span style="font-weight: bold;">{{ allPrice }}</span>元</span>
    </div>
    <div class="order-btn">
      <button @click="orderBtn">{{ btnMsg }}</button>
    </div>
    <div class="line"></div>
    <!-- </div> -->
  </div>
</template>

<script>
  export default {
    name: "OrderListItem",
    props: {
      orderDataItem: {
        type: Object,
        require: true,
      },
      btnMsg:String
    },
    computed: {
      allPrice() {
        return this.orderDataItem.orderDetail.reduce((prev, current) => {
          return (parseFloat(prev) + current.price * current.number).toFixed(2);
        }, 0)
      }
    },
    methods: {
      orderBtn(){
        alert("订单"+this.orderDataItem.orderId);
      }
    }
  };
</script>

<style scoped>
  .order-head {
    overflow: hidden;
    margin-bottom: 5px;
  }

  .order-desc {
    color: #B2B2B2;
    font-size: 12px;
  }

  .order-desc-left {
    float: left;
  }

  .order-desc-right {
    float: right;
    color: #B2B2B2;
    font-size: 12px;
  }

  .order-info {
    display: flex;
  }

  .order-img {
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid #ccc;
  }

  .detail-right {
    flex: 1;
  }

  .order-img img {
    height: 100%;
    width: 100%;
  }

  .order-name {
    width: 50%;
    padding-left: 20px;
    box-sizing: border-box;
  }

  .order-price-number {
    display: flex;
    justify-content:space-between;
    width: 50%;
    padding-left: 20px;
    box-sizing: border-box;
  }
  .number {
    font-size: 12px;
    padding-right: 10px;
  }

  .order-count-total {
    text-align: right;
    font-size: 14px;
    font-weight: 500;
  }
  .order-btn{
    text-align: right;
  }
  .order-btn button{
    width: 100px;
    border: 2px solid #c0c4cc;
    padding: 5px 8px;
    border-radius: 100px;
  }
  .line {
    height: 1px;
    background-color: #B2B2B2;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .enterprise {
    font-size: 18px;
    font-weight: bold;
  }
  .desc-item{
    display: flex;
    margin-bottom: 5px;
  }
</style>